<template>
  <div>
    <div class="pagination">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageData.pageNo"
          :page-sizes="[4, 6, 8, 10]"
          :page-size="pageData.pageSize"
          layout="total,sizes ,prev, pager, next,jumper"
          :total="pageData.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'pagination',
  props:{
    pageData: {
      type: Object,
      default: function(){
        return {pageSize:4,pageNo:1,total:0}
      }
    },
  },
  data(){
    return{
    }
  },  
  methods:{
    handleSizeChange(val) {
      this.$emit("change",{pageSize:val,pageNo:this.pageData.pageNo,total:this.pageData.total})
    },
    handleCurrentChange(val) {
      this.$emit("change",{pageSize:this.pageData.pageSize,pageNo:val,total:this.pageData.total})
    }
  }
}
</script>

<style lang="less">
  .pagination{
    margin-top: 10px;
    .block{
      text-align: center;
      .el-pagination{
        position: relative;
      }
      .total{
        position: absolute;
        color: #606266;
        left: 37%;
        margin-top: 8px;
      }
    }
  }
</style>